<template>
  <div>
<h1>登录页面</h1>
<table class="table table-bordered">
  <tr>
    <td align="right">用户名:</td>
    <td><input type="text" v-model="loginData.username"></td>
  </tr>
  <tr>
    <td align="right">密码:</td>
    <td><input type="password" v-model="loginData.userPwd"></td>
  </tr>
  <tr>
    <td align="right"></td>
    <td><input type="button" value="登录" class="btn btn-success" @click="login"></td>
  </tr>
</table>
  </div>
</template>

<script setup lang="ts">
//逻辑：
//点击登录去判断有没有这个用户，如果有，在判断一下是否完善过个人信息，如果完善过跳转到主页面
//如果没有完善过，去完善个人信息
//点击登录去判断有没有这个用户，如果没有这个用户，去注册用户，登陆成功，跳转到登录页面，再次登录
import axios from 'axios'
import {reactive, toRefs} from 'vue'
import { useRouter } from 'vue-router';
var router=useRouter()
//数据
let data=reactive({
  loginData:{
    username:'',
    userPwd:''
  }
})

let{loginData}=toRefs(data)

//登录操作
const login=()=>{
  //验证用户名和密码不能为空
  if(loginData.value.username==''){
    alert('用户名不能为空')
    return
  }
  if(loginData.value.userPwd==''){
    alert('密码不能为空')
    return
  }
  
  //请求接口做登陆操作
axios({
  url:"http://localhost:49846/api/Users/GetUserLogin",
  method:"get",
  params:{
    username:loginData.value.username,
    userPwd:loginData.value.userPwd
  },

}).then(res=>{
  //如果请求成功的操作
  console.log(res);
  if(res.data==null){
    alert('用户不存在');
    router.push('/register')
  }else{
    //1.在判断下用户有没有完善信息，如果没有跳转到信息页面完善
    //2.如果已经完善了，跳转到主页面
    alert("登录成功")
  }
}).catch(err=>{
  //如果请求失败的操作
  console.log(err);
})
}


</script>

<style scoped>

</style>